<template>
    <div>
        <div class="userInfo">
            <div class="userInfoBox">
                <div class="userIcon">
                    <img src="@/assets/user.webp" alt="">
                </div>
                <div class="userInfoText">
                    <p class="mb3">
                        欢迎回来
                    </p>
                    <p class="userName">
                        黄油小郎君
                    </p>
                </div>
            </div>
        </div>
        <nut-collapse v-show="!showDetail" v-model="collapseVal1" accordion>
            <div class="nut-collapse-item nut-collapse-item__border" @click="linkTo('/publish-home')">
                <div class="nut-collapse-item__title ">
                    发布者 - 主页
                </div>
            </div>
            <nut-collapse-item name="name1" title="游戏管理">
                <p class="person-item" @click="toDetailBlock(1)">
                    <span class="item-icon icon4"></span>
                    发布新游戏
                </p>
                <p class="person-item" @click="toDetailBlock(2)">
                    <span class="item-icon icon3"></span>
                    审核状态
                </p>
            </nut-collapse-item>
            <nut-collapse-item name="name1" title="发布公告">
                <p class="person-item" @click="toDetailBlock(1)">
                    <span class="item-icon icon4"></span>
                    发布新公告
                </p>
                <p class="person-item" @click="toDetailBlock(2)">
                    <span class="item-icon icon3"></span>
                    审核状态
                </p>
            </nut-collapse-item>
            <div class="nut-collapse-item nut-collapse-item__border">
                <div class="nut-collapse-item__title ">
                    修改密码
                </div>
            </div>
            <div class="nut-collapse-item nut-collapse-item__border">
                <div class="nut-collapse-item__title ">
                    退出登录
                </div>
            </div>
        </nut-collapse>

        <template v-if="showDetail">
            <div style="color: #fff;">
                <template v-if="currentType === 1">
                    <p class="person-item" style="position: relative;">
                        <span class="item-icon icon4"></span>
                        编辑个人档案
                        <span class="backBtn" @click="closeWindow">
                            <i class="backIcon"></i>返回
                        </span>
                    </p>
                </template>
                <template v-if="currentType === 2">
                    <p class="person-item" style="position: relative;">
                        <span class="item-icon icon3"></span>
                        修改偏好设定
                        <span class="backBtn" @click="closeWindow">
                            <i class="backIcon"></i>返回
                        </span>
                    </p>
                </template>
                <template v-if="currentType === 3">
                    <p class="person-item" style="position: relative;">
                        <span class="item-icon icon1"></span>
                        修改密码
                        <span class="backBtn" @click="closeWindow">
                            <i class="backIcon"></i>返回
                        </span>
                    </p>
                    <edit-pwd></edit-pwd>
                </template>
            </div>
        </template>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const showDetail=ref(false)
const collapseVal1 = ref(['name1'])
const currentType = ref(0)
import EditPwd from './components/editPwd.vue'
import { useRouter } from 'vue-router'
const Router = useRouter()
const linkTo = (path: string) => {
    Router.push(path)
}

const toDetailBlock=(type:number)=>{
    showDetail.value=true
    currentType.value=type
}
const closeWindow=()=>{
    showDetail.value=false
}

</script>

<style scoped lang="scss">
:deep(.nut-collapse-item .nut-collapse-item__title) {
    background-color: #1c1c1c;
    color: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
}

:deep(.isSetPage .nut-collapse-item__title){
    background-color: #5f5f5f !important;
}
:deep(.isSetPage .nut-collapse__item-wrapper__content){
    padding-top: 0 !important;
}

:deep(.nut-collapse-item__border .nut-collapse-item__title::after) {
    border-bottom: 1px solid #2f2f2f;
}

:deep(.nut-collapse__item-wrapper__content) {
    background-color: #5f5f5f !important;
    color: #fff !important;
    padding: 15px 20px !important;
}

.userInfo {
    display: flex;
    justify-content: center;
    padding: 25px;

    .userInfoBox {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        gap: 20px;

        .userIcon {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            position: relative;

            img {
                width: 100%;
            }

            .userIconEdit {
                position: absolute;
                width: 25px;
                height: 25px;
                background-color: #5f5f5f;
                border-radius: 50%;
                left: 5px;
                bottom: 0;
                background: url('../../assets/userIconEdit.png') no-repeat center;
                background-size: contain;
            }
        }

        .userInfoText {
            .userName {
                font-size: 18px;
                font-weight: bold;
                margin-bottom: 8px;
            }

            .userId {
                font-size: 13px;
                color: #c1c1c1;

                .copyBtn {
                    display: inline-block;
                    width: 12px;
                    height: 12px;
                    background: url('../../assets/copy.png') no-repeat center;
                    background-size: contain;
                    margin-left: 3px;
                    margin-bottom: -1px;
                }
            }

        }
    }
}

.person-item {
    font-size: 13px;
    padding: 10px 0;
    font-weight: bold;
    display: flex;
    align-items: center;
    padding-left: 10px;

    .item-icon {
        display: inline-block;
        width: 11px;
        height: 11px;
        margin-right: 10px;
        margin-top: -2px;
        &.icon1 {
            background: url('../../assets/user-1.png') no-repeat center;
            background-size: contain;
        }
        &.icon2 {
            background: url('../../assets/user-2.png') no-repeat center;
            background-size: contain;
        }
        &.icon3 {
            background: url('../../assets/user-3.png') no-repeat center;
            background-size: contain;
        }
        &.icon4 {
            background: url('../../assets/user-4.png') no-repeat center;
            background-size: contain;
        }
    }
}

.backBtn{
    position: absolute;
    right: 20px;
    display: flex;
    align-items:center;
    .backIcon{
        margin-right: 3px;
        margin-top: -1px;
        display: inline-block;
        width: 15px;
        height: 15px;
        background: url('../../assets/back.png') no-repeat center;
        background-size: contain;
    }
}
</style>
